<template>
  <van-popup
    v-model="show"
    position="left"
    class="fa"
    :style="{ height: '100%', width: '100%' }"
  >
    <div>
      <van-nav-bar
        title="发货信息"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
      <div class="client">
        <van-field
          label="客户名称："
          v-model="entity.cCusName"
          readonly
          placeholder="请选择客户"
        >
        </van-field>
        <van-field
          readonly
          v-model="entity.cShipAddress"
          label="地址"
          type="textarea"
          placeholder="请输入地址"
          rows="1"
          autosize
        />
      </div>
      <div class="scrollBar">
        <div class="Informationbox" v-for="item in data" :key="item.Id">
          <van-field readonly label="产品名称" v-model="item.cInvName">
          </van-field>
          <van-field readonly label="数量" v-model="item.iQuantity">
          </van-field>
          <van-field readonly label="报价" v-model="item.iQuotedPrice">
          </van-field>
          <van-field readonly label="累计结算金额" v-model="item.iSettleNum">
          </van-field>
        </div>
      </div>
    </div>
    <Myuser @customerChoice="Client" ref="myuser" />
    <Product @Product="Product" ref="product" />
    <div
      :style="{
        position: 'absolute',
        right: 0,
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e9e9e9',
        padding: '5px 16px',
        background: '#fff',
        textAlign: 'right',
        zIndex: 1
      }"
    >
      <van-button @click="close" slot="button" type="default">关闭</van-button>
    </div>
  </van-popup>
</template>

<script>
import { Icon } from "vant";
import { Popup } from "vant";
import { AddressList } from "vant";

import { Row, Col, Cell, CellGroup, Toast, NavBar } from "vant";
import { Field } from "vant";
//客户
import Myuser from "@/components/OwnUser.vue";
import Product from "@/components/Product.vue";
export default {
  components: {
    "van-nav-bar": NavBar,
    "van-icon": Icon,
    "van-popup": Popup,
    "van-row": Row,
    "van-address-list": AddressList,
    "van-field": Field,
    "van-col": Col,
    "van-cell": Cell,
    "van-cell-group": CellGroup,
    Myuser,
    Product
  },
  data() {
    return {
      entity: {},
      data: [],
      show: false,
      Id: ""
    };
  },

  methods: {
    handleSubmit() {
      var entityData = { ...this.entity };
      var DDND_List = [...this.data];
      entityData.DDND_List = DDND_List;
      console.log(entityData);
      this.http
        .post("/DeliveryManagement/DEL_DeliveryNoticeMain/SaveData", entityData)
        .then(resJson => {
          console.log(resJson);

          if (resJson.Success) {
            Toast(resJson.Msg);
            this.show = false;

            console.log(this.$parent);
            this.$parent.getDataList();
          } else {
            Toast(resJson.Msg);
          }
        });
    },
    //返回
    onClickLeft() {
      this.show = false;
    },
    //选中的产品
    Product(a) {
      console.log(a, "选择产品信息");

      this.data.push({
        ProductId: a.cInvCode,
        cInvName: a.cInvName,
        cInvCode: a.cInvCode,
        cInvStd: a.cInvStd
      });
    },
    // 选择产品页面;
    Add() {
      this.$refs.product.openForm();
    },
    //关闭
    close() {
      this.show = false;
    },
    //本条客户的数据
    Client(a) {
      console.log(a);
      this.$set(this.entity, "CustomerName", a.cCusName);
      // console.log(this.entity.CustomerName);
      // this.entity.CustomerName = a.cCusName;
      this.entity.CustomerId = a.cCusCode;
    },
    //选择客户
    CustomerChoice() {
      this.$refs.myuser.openForm();
    },

    init() {
      this.show = true;

      (this.data = []), (this.entity = {});
    },

    openForm(Id) {
      this.init();

      if (Id) {
        this.Id = Id;

        this.loading = true;
        this.http
          .post("/OrderManagement/DispatchList/GetTheData", { id: Id })
          .then(resJson => {
            this.loading = false;

            this.entity = resJson.Data;
            // console.log(this.entity);
          });
        this.http
          .post("/OrderManagement/DispatchLists/GetDataList", {
            PageIndex: 1,
            PageRows: 99,
            SortField: "DLID",
            SortType: "asc",
            Search: { Condition: "DLID", Keyword: Id },
            ...this.filters
          })
          .then(resJson => {
            this.loading = false;
            this.data = resJson.Data;
            if (this.data) {
              const pagination = { ...this.pagination };
              pagination.total = resJson.Total;
              this.pagination = pagination;
            }
          });
      }
    }
  }
};
</script>

<style scoped>
.aa {
  text-align: right;
}
.scrollBar {
  height: 550px;
  overflow: auto;
}
.close {
  position: "absolute";

  right: 0;
  bottom: 0;
  padding: "5px 16px";
  background: "#fff";
  text-align: right;
  z-index: 1;
}
.client {
  box-shadow: rgba(128, 128, 128, 0.1) 10px 10px 5px 5px;
}
.Informationbox {
  width: 95%;

  margin: 0 auto;

  border: 1px solid #ccc;

  margin-top: 20px;
  margin-bottom: 10px;
}
/* .Father {
  display: flex;
} */
</style>
